﻿@model BudgetMealsModels.Entities.FormMeal

@{
    ViewBag.Title = "Edit";
}

<link href="@Url.Content("~/Content/CSS/Meal.css")" rel="stylesheet" type="text/css" />

@using (Html.BeginForm("Edit", "Meal", FormMethod.Post, new Dictionary<string, object> { {"id", "MealEditForm"} }))
{
    @Html.ValidationSummary();
    <h3>Meal Name</h3>
    @Html.EditorFor(m => m.Name)
    @Html.EditorFor(m => m.ID)
    @Html.EditorFor(m => m.AppetizerID)
    @Html.EditorFor(m => m.MainCourseID)
    @Html.EditorFor(m => m.DessertID)
    
    <div style="margin: 10px 0px;">
        <div>
            <img src="@Url.Content("~/Content/Images/Misc/ArrowRight.png")" id="AppetizerPointer" alt="" />
            <h3 class="PseudoLink" id="AppetizerHeader">Appetizer</h3>
            <span id="AppetizerName">
                @if (Model == null || Model.Appetizer == null)
                {
                    <img src="@Url.Content("~/Content/Images/Misc/Warning.png")" style="width: 18px; height: 18px;" alt="" />
                    @:None
                }
                else
                {
                    @Model.Appetizer
                }
            </span>
        </div>
        <div>
            <img src="@Url.Content("~/Content/Images/Misc/ArrowRight.png")" id="MainCoursePointer" alt="" />
            <h3 class="PseudoLink" id="MainCourseHeader">Main Course</h3>
            <span id="MainCourseName">
                @if (Model == null || Model.MainCourse == null)
                {
                    <img src="@Url.Content("~/Content/Images/Misc/Warning.png")" style="width: 18px; height: 18px;" alt="" />
                    @:None
                }
                else
                {
                    @Model.MainCourse
                }
            </span>
        </div>
        <div>
            <img src="@Url.Content("~/Content/Images/Misc/ArrowRight.png")" id="DessertPointer" alt="" />
            <h3 class="PseudoLink" id="DessertHeader">Dessert</h3>
            <span id="DessertName">
                @if (Model == null || Model.Dessert == null)
                {
                    <img src="@Url.Content("~/Content/Images/Misc/Warning.png")" style="width: 18px; height: 18px;" alt="" />
                    @:None
                }
                else
                {
                    @Model.Dessert
                }
            </span>
        </div> 
    </div>
    <input type="submit" value="Submit" />
}

<div id="RecipeSearchWrapper">
    <div id="RecipeSearchField">
        Search for a recipe: <input type="text" id="RecipeSearch" /> <input type="checkbox" id="SearchMyRecipes" name="SearchMyRecipes" checked="checked" /><label for="SearchMyRecipes"> Search only my recipes</label>
    </div>
    <div id="SelectorContent"></div>
</div>

<div class="ClearFix"></div>

<script type="text/javascript">
    var Field = "Appetizer";
    var textBoxSearchURL = "@Url.Action("SelectorList", "Recipe", new { SearchString = "SearchStringValue", SearchUserRecipes = "SearchUserRecipesValue" })".replace("&amp;", "&");
    
    function ChangeField(field) {
        $("#" + Field + "Pointer").hide();
        Field = field;
        $("#" + Field + "Pointer").show();
    }
    function SearchRecipes()
    {
        var SelectorContent = $("#SelectorContent");
        
        SelectorContent.html("<img src=\"@Url.Content("~/Content/Images/Ajax/Loader.gif")\" alt=\"\" />");
        
        $.ajax(
            { 
                url: textBoxSearchURL.replace("SearchStringValue", $("#RecipeSearch").val()).replace("SearchUserRecipesValue", $("#SearchMyRecipes").is(":checked")),
                success: function (response)
                {
                    SelectorContent.html(response);
                },
                failure: function (response)
                {
                    SelectorContent.html("An error occured while searching for the ingredient");
                }
            }
        );
    }
    $("#RecipeSearch").keyup(
        function (event) {
            SearchRecipes(this);
        }
    );
    $("#SearchMyRecipes").click(
        function (event) {
            SearchRecipes(this);
        }
    );
    $("#AppetizerHeader").click(
        function (event) {
            ChangeField("Appetizer");
        }
    );
    $("#MainCourseHeader").click(
        function (event) {
            ChangeField("MainCourse");
        }
    );
    $("#DessertHeader").click(
        function (event) {
            ChangeField("Dessert");
        }
    );

    $("#AppetizerPointer").show();
</script>